<template>
    <div class="login-box">

        <my-header :title = 'title'></my-header>

        <div class="switch">
            <p :class="flag ? '' : 'action'" @click="set">账号密码登陆</p>
            <p :class="flag ? 'action' : ''" @click="set">手机验证登录 <span></span></p>
            <!-- <div class="border"></div> -->
        </div>
        
        <div class="meituanLogin" v-show="!flag">
            <div class="meituan">
                <van-cell-group>
                    <van-field
                        v-model="username"
                        required
                        clearable
                        label="用户名"
                        right-icon="question-o"
                        placeholder="请输入用户名"
                        @click-right-icon="$toast('question')"
                    />

                    <van-field
                        v-model="password"
                        type="password"
                        label="密码"
                        placeholder="请输入密码"
                        required
                    />
                </van-cell-group>
            </div>
            
            <div class="btn-wrap">
                <van-button type="info" class="btn" @click="getLogin">登录</van-button>
            </div>

            <p class="subline">
                <router-link to="/signup">立即注册</router-link>
                <a href="https://passport.meituan.com/useraccount/retrievepassword" class="pull-right">找回密码</a>
            </p>

        </div>

        <div class="phoneLogin"  v-show = "flag">
            <div class="phoneInput">
                <!-- <img class="login-icon icon-align" src="https://ms0.meituan.net/touch/img/account/login/icon_signin_phone@2x.png"> -->
                <input style="border: none" type="tel" name="mobile" id="login-mobile" class="input-weak kv-k J-input J-tel J-login-name" placeholder="请输入手机号" maxlength="11">
                <!-- <div class="to-del J-to-del-mobile J-to-del" style="display: none"></div> -->
                <!-- <button id="smsCode" type="button" class="btn btn-weak kv-v btn-captacha" gaevent="imt/buy/quickBuy/send" disabled="disabled">获取验证码</button> -->
                <van-button type="info" class="btn" style="border: none">获取验证码</van-button>
            </div>
            
            <van-cell-group>
                <van-field v-model="value" placeholder="请输入短信验证码" />
            </van-cell-group>

            <div class="btn-wrapper">
                <van-button type="info" class="btn1" style="border: none">登录</van-button>
            </div>

            <p class="tishi">温馨提示：未注册过健客的手机号，登录时会自动注册健客账号，且代表您已同意</p>
        </div>

    </div>
</template>

<script>
import myHeader from 'Components/common/myHeader'

export default {
    components: {
        myHeader
    },

    data() {
        return {
            username: '',
            password: '',
            flag: false,
            value: '',
            title: '用户登录'
        }
    },
    
    methods: {
        set() {
            this.flag = !this.flag
        },
        getLogin () {
            if (this.username  && this.password ) {
                sessionStorage.setItem('flag', true);
                this.$router.replace('/user');
            }
        }
    },
    
}
</script>

<style lang="stylus" scoped>
@import '~Css/_border.styl'
.van-cell {
    padding: .1rem .2rem !important;
}
.phoneInput {
    padding: .1rem .2rem !important;
}
.van-field {
    line-height .3rem !important;
}
.van-button--normal {
    background: #2ca3ff !important;
    // border: 1px solid #2ca3ff !important;
    // border 0 0 .08rem 0, #2ca3ff !important;
}


.action 
    color #2ca3ff !important
.login-box
    flex 1
    .switch
        display flex
        border 0 0 .08rem 0, #d6d6d6
        // .border
        p
            flex 1
            text-align center
            padding-top .14rem
            padding-bottom .1rem
            font-size .14rem
            color #333
            position relative
        
                // position absolute
                // width 100%
                // height: 0.08rem
                // background red
                // bottom -0.08rem
                // z-index 1
    .btn-wrap
        padding: .14rem .2rem
        .btn
            height .37rem
            line-height .37rem
            font-size .16rem
            background #e54847
            width 100%

    .tishi {
        padding: 0rem .2rem;
        font-size: .12rem;
        color: #999;
    }

    .subline
        display flex
        padding: 0rem .2rem
        justify-content space-between
        a
            color #2ca3ff
    .copyright 
        text-align center
        a
            display inline
            font-size .14rem
            color #2ca3ff
    .phoneLogin
        .phoneInput
            padding .1rem
            display flex
            border 0 0 1px 0, #d6d6d6
            .input-weak
                flex 1
            .btn 
                float right
                background #dcdcdc
                color #fff
                height .3rem
                line-height .3rem
                width 1rem
                margin-left .1rem
                
                // padding .15rem 
                // border 1px 1px 1px 1px, #dcdcdc
                // display: inline-block;
                // margin: 0;
                // text-align: center;
                // height: .3rem;
                // padding: 0 .16rem;
                // border-radius: .03rem;
                // color: #fff;
                // border: none;
                // background-color: #df2d2d;
                // font-size: .14rem;
                // vertical-align: middle;
                // line-height: .3rem;
                // box-sizing: border-box;
                // cursor: pointer;
                // -webkit-user-select: none;
        .btn-wrapper
            padding .14rem .2rem
            .btn1
                width 100%
                height .47rem
                background #dcdcdc
                color #fff
                font-size .16rem
                height .37rem
                line-height .37rem
                font-size .16rem
                background #e54847
                width 100%
        

</style>


